<template>
  <!-- 大盒子 -->
  <div class="big-box">
    <!-- 左边盒子 -->
    <div class="Leftbox">
      <!-- 下拉框 -->
      <el-row :gutter="20">
        <el-col :span="6">
          <!-- <div class="grid-content ep-bg-purple" /> -->
          <el-card class="box-card">
            <el-col :span="12">
              <el-menu
                default-active="1"
                class="el-menu-vertical-demo"
                popper-offset="6"
              >
                <el-sub-menu index="1">
                  <template #title>
                    <el-icon><location /></el-icon>
                    <span>消息</span>
                  </template>

                  <el-menu-item-group>
                    <el-menu-item index="1-1"
                      ><span @click="toSystemNote">系统通知</span>
                    </el-menu-item>

                    <!-- <el-menu-item index="1-2">
                      <router-link
                        to="/Communication/interactNote"
                        style="text-decoration: none"
                        ><li>互动通知</li></router-link
                      >
                    </el-menu-item> -->
                    <el-menu-item index="1-2">
                      <span @click="toInteractNote">互动通知</span>
                    </el-menu-item>
                    <el-menu-item index="1-3">
                      <span @click="toOrderNote">订单通知</span>
                    </el-menu-item>

                    <!-- <el-menu-item index="1-3">
                      <router-link
                        to="/Communication/orderNote"
                        style="text-decoration: none"
                        ><li>订单通知</li></router-link
                      >
                    </el-menu-item> -->
                  </el-menu-item-group>
                </el-sub-menu>
              </el-menu>
            </el-col>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <div class="boxr">
      <el-card class="box-card1"> {{ info }} </el-card>
      <router-view></router-view>
    </div>
  </div>
</template>
<script lang="ts" setup>
import useCommuniction from "./hooks";
const communictionState = useCommuniction();
const { info, toSystemNote, toOrderNote, toInteractNote } = communictionState;
</script>
<style scoped>
.big-box {
  width: 900px;
  height: 1000px;
  /* background-color: aqua; */
  display: flex;
}
.Leftbox {
  width: 300px;
  height: 100%;
  /* background-color: greenyellow; */
}
.boxr {
  width: 1000px;
  height: 1000px;
  /* background-color: red; */
  flex: 1;
}

.el-menu {
  border-right: 0;
}
.box-card {
  margin-left: 70px;
  width: 220px;
  margin-top: 20px;
}
.el-card__body {
  width: 210px;
}
.el-col-12 {
  max-width: 100%;
  flex: 0 0 50%;
}
.box-card1 {
  width: 900px;
  height: 98px;
  margin-top: 20px;
  margin-left: 10px;
  margin-right: 309px;
}
.box-card2 {
  width: 900px;
  height: 600px;
  /* background-color: skyblue; */
  margin-left: 10px;
  margin-top: 15px;
}
element.style {
  padding-right: 20px;
  width: 100px;
  padding-left: 30px;
}
.el-card-bg-color {
  padding: 20px;
}

.el-menu-item:hover {
  color: rgb(248, 74, 164);
}
</style>
